<template>
	<!-- 店铺详情 -->
	<view class="pages-home" v-if="detail.id">

		<banner :list="detail.imgs" :margin="0" :autoplay="true" :height="562" :indicatorActiveColor="primaryColor">
		</banner>
		<view class="fill-base pd-lg">
			<view class="flex-between f-desc c-caption mt-sm">
				<view class="flex-y-baseline flex-1">
					<view class="f-title c-title">{{detail.title}}</view>
				</view>
				<view class="flex-y-baseline flex-center">
					<view>{{detail.total_sale}}人选择</view>
					<view class="flex-center ml-md">
						<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
						<view class="f-desc c-title">156km{{}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="goodsList && goodsList.length > 0">
		
			<view @tap.stop="$util.goUrl({url:`/user/pages/address/list?check=1`})"
				class="address-info flex-warp mt-lg ml-lg mr-lg pd-lg fill-base radius-16">
				<view class="address-icon flex-center c-base radius"
					:style="{background:`linear-gradient(to right, ${subColor}, ${primaryColor})`}"><i
						class="iconfont iconjuli"></i></view>
				<view class="flex-1 flex-between ml-md">
					<view class="max-500">
						<block v-if="orderInfo.address_info.id">
							<view class="flex-y-baseline username c-title text-bold">
								{{orderInfo.address_info.user_name}}
								<view class="ml-md f-desc c-caption">{{orderInfo.address_info.mobile}}</view>
							</view>
							<view class="f-desc c-title ellipsis">
								{{`${orderInfo.address_info.address} ${orderInfo.address_info.address_info}`}}
							</view>
						</block>
						<block v-else>
							<view class="username c-title text-bold">请选择地址</view>
						</block>
					</view>
					<i class="iconfont icon-right"></i>
				</view>
			</view>

			<view v-if="false" class="mt-md ml-lg mr-lg  fill-base radius-16">
				<view class="list-item2 flex-center pd-lg" :class="[{'b-1px-t':index!=0}]"
					v-for="(item,index) in goodsList" :key="index">
					<image mode="aspectFill" class="item-img radius-16" :src="item.cover"></image>
					<view class="flex-1 ml-md">
						<view class="f-title c-title ellipsis">{{item.title}}</view>
						<view class="flex-y-center f-desc c-caption">
							<view class="f-title c-warning mr-sm">¥{{item.price}}</view>/ {{item.time_long}}分钟
						</view>
						<view class="flex-between">
							<view class="f-caption c-caption mt-sm mb-sm max-300">
								服务：{{orderInfo.coach_info.coach_name}}
							</view>
							<view class="flex-warp">
								<button @tap.stop="changeNum(-1,index)" class="reduce"
									:style="{borderColor:primaryColor,color:primaryColor}"><i
										class="iconfont icon-jian-bold"></i></button>
								<button class="addreduce clear-btn">{{item.num || 0}}</button>
								</block>
								<button @tap.stop="changeNum(1,index)" class="add"
									:style="{background:primaryColor,borderColor:primaryColor}"><i
										class="iconfont icon-jia-bold"></i></button>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<!-- <view class="space-md"></view> -->
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				width="33.3%" height="100rpx"></tab>
			<view class="space-md"></view>
			<view class="fill-base pd-lg f-paragraph c-desc">
				<view class="c-title text-bold mb-md">{{tabList[activeIndex].title}}</view>
				<parser :html="detail[rule[activeIndex]]" @linkpress="linkpress" show-with-animation lazy-load>加载中...
				</parser>
			</view>
		
			<!-- <view class="space-max-footer"></view> -->
		
		</view>
		
		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="popup-rule">
				<view class="fill-base pd-lg radius-26">
					<view class="f-title c-title text-bold flex-center pd-lg">平台交易规则</view>
					<scroll-view scroll-y @touchmove.stop.prevent class="rule-text">
						<parser :html="configInfo.trading_rules" @linkpress="linkpress" show-with-animation lazy-load>
							加载中...
						</parser>
					</scroll-view>
				</view>
				<view @tap="$refs.show_rule_item.close()" class="flex-center pd-lg"><i
						class="iconfont icon-close c-base"></i></view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				options: {},
				activeIndex: 0,
				tabList: [{
					title: '项目介绍',
					id: 0
				}, {
					title: '禁忌说明',
					id: 1,
				}, {
					title: '下单须知',
					id: 2
				}],
				goodsList: [],
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				detail: {},
				
				carTypeInd: 0,
				payInd: 0,
				options: {},
				balance: 0,
				send_info: {
					time_index: 0,
					time: {}
				},
				orderInfo: {
					coupon_id: 0,
					address_info: {
						id: 0
					}
				},
				form: {
					text: ''
				},
				lockTap: false,
				isBus: 0,
				isAgree: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo']),
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.getDetail()
				this.initOrder()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			async initOrder() {
				this.getIsBusCall('')
				let {
					id: coach_id,
					ser_id = 0
				} = this.options
				let {
					coupon_id,
					address_info
				} = this.orderInfo
				let {
					id: address_id
				} = address_info
				if (!address_id) {
					let address_info = await this.$api.mine.getDefultAddress()
					address_id = address_info && address_info.id ? address_info.id : null
				}
				let car_type = this.carTypeList[this.carTypeInd].id
				let [data, mineInfo] = await Promise.all([this.$api.order.payOrderInfo({
					service_id: ser_id,
					coach_id,
					car_type,
					coupon_id,
					address_id
				}), this.getMineInfo()])
				data.address_info = data.address_info.id ? data.address_info : {}
				debugger
				this.orderInfo = data
				let {
					balance
				} = this.mineInfo
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getDetail() {
				let {
					id
				} = this.options
				this.detail = await this.$api.service.serviceInfo({
					id
				});
				let param = {
					id: id,
					lng: 0,
					lat: 0
				}
				let newList = await this.$api.service.serviceCoachList(param);
				this.goodsList = newList.data
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.activeIndex = index;
			},
			linkpress(res) {
				console.log("linkpress", res);
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			}
			
		}
	}
</script>


<style lang="scss">
	.pages-home {
		.list-item {
			.item-btn {
				width: 129rpx;
				height: 54rpx;
			}
		}
	}
	.list-item {
		background-color: #ffffff;
		.cover {
			width: 180rpx;
			height: 180rpx;
		}
		
		.text {
			width: 75rpx;
			height: 75rpx;
		}
		
		.image-bg {
			width: 55rpx;
			height: 55rpx;
			font-weight: 600;
			padding-top: 0rpx;
			text-align: center;
			background-position: center;
			background-size:cover;
			background-repeat: no-repeat;
			background-image: url("/static/common/avoid.png");
		}
	
		.time-long {
			min-width: 72rpx;
			height: 30rpx;
			padding: 0 5rpx;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FFEEB9;
			margin-right: 16rpx;
		}
	
		.f-icontext {
			font-size: 18rpx;
		}
	
		.text-delete {
			font-size: 20rpx;
			color: #B9B9B9;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
		
		.item-img {
			width: 140rpx;
			height: 140rpx;
			background: #f4f6f8;
		}
			
		.ellipsis {
			max-width: 466rpx;
		}
			
		.item-tag {
			width: 100rpx;
			height: 36rpx;
			margin-top: -18rpx;
		}
			
		.iconyduixingxingshixin {
			font-size: 28rpx;
		}
	}
	
	.item-textarea {
		width: 570rpx;
		height: 120rpx;
	}
	
	.list-item2 {
		.item-img {
			width: 140rpx;
			height: 140rpx;
			background: #f4f6f8;
		}
	
		.ellipsis {
			max-width: 466rpx;
		}
	
		.item-tag {
			width: 100rpx;
			height: 36rpx;
			margin-top: -18rpx;
		}
	
		.iconyduixingxingshixin {
			font-size: 28rpx;
		}
	
		.item-btn {
			width: 129rpx;
			height: 54rpx;
		}
	}
	
	.pay-info {
		height: 110rpx;
		bottom: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.pay-btn {
			width: 182rpx;
			height: 74rpx;
		}
	}

	.popup-rule {
		width: 680rpx;
		height: auto;

		.rule-text {
			min-height: 300rpx;
			max-height: 60vh;
		}

		.iconfont {
			font-size: 60rpx;
		}
	}

</style>
